<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>
		<div id="dialog">
			<div>
				<ul>
					<li>姓名：<input type="text" id="name" /></li>
					<li>年龄：<input type="text" id="age" /></li>
					<li>电话：<input type="text" id="tel" /></li>
					<li>电子邮箱：<input type="text" id="mail" /></li>
					<li><input type="button" id="addOrChange" name="" value="确定" onclick="addAddress()" /></li>
				</ul>
			</div>
		</div>
		<div id="main">
			<div id="nav">
				<input type="text" name="name" id="searchText" placeholder="请输入查询的姓名。。。" />
				<input type="button" name="search-commit" id="search-commit" value="搜索" onclick="searchAddress()" />
				<input type="button" name="new" value="新建" onclick="dialogShow(true)" />
				<input type="button" name="reset" id="reset" value="重置" onclick="reset()" />
			</div>
			<div id="content" class="clear">
			
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var book;

		function NewAddress(list) {
			this.list = list;
			var content = document.querySelector('#content');
			var str = '';
			for(let i = 0; i < list.length; i++) {
				//原谅我懒得写了😂
				str += '<ul><li>姓名：' + this.list[i].name + '</li><li>年龄：' +
					this.list[i].age + '</li><li>电话：' + this.list[i].tel + '</li><li>电子邮箱：' +
					this.list[i].mail + '</li><li><input type="button" name="' + this.list[i].id + '" value="修改" onclick="editAddress(this)"/><input type="button" name="' + this.list[i].id + '" value="删除" onclick="deleteAddress(this)"/></li></ul>'
			}
			content.innerHTML = str;
		};

		NewAddress.prototype = {
			add: function(name, age, tel, mail) {
				let book = {
					'name': name,
					'age': age,
					'tel': tel,
					'mail': mail
				};
				ajax({
					url: "http://riseikann.applinzi.com/test/testPOST.php", //请求地址
					type: "POST", //请求方式
					data: {
						type: 'add',
						name: book.name,
						age: book.age,
						tel: book.tel,
						mail: book.mail,
						id: ''
					}, //请求参数
					dataType: "json",
					success: function(response, xml) {
						let request = JSON.parse(response);
						console.log(request);
						if(request[0].message == '添加成功！') {
							alert(request[0].message);
							dialogShow(false);
							location.reload();
						} else {
							alert('添加失败请稍后重试！');
						}
					},
					fail: function(status) {
						console.log(status);
					}
				});
			},
			remove: function(addressID) {
				ajax({
					url: "http://riseikann.applinzi.com/test/testPOST.php", //请求地址
					type: "POST", //请求方式
					data: {
						type: 'remove',
						id: addressID
					}, //请求参数
					dataType: "json",
					success: function(response, xml) {
						let request = JSON.parse(response);
						console.log(request);
						if(request[0].message == '删除成功！') {
							alert(request[0].message);
							location.reload();
						} else {
							alert('删除失败请稍后重试！');
						}
					},
					fail: function(status) {
						console.log(status);
					}
				});
			},
			search: function(name) {
				var content = document.querySelector('#content');
				var str = '';
				this.list.map(function(key, value) {
					if(key['name'] == name) {
						str += '<ul><li>姓名：' + key.name + '</li><li>年龄：' +
							key.age + '</li><li>电话：' + key.tel + '</li><li>电子邮箱：' +
							key.mail + '</li><li><input type="button" name="' + key.id + '" value="修改" onclick="editAddress(this)"/><input type="button" name="' + key.id + '" value="删除" onclick="deleteAddress(this)"/></li></ul>'
					}
				});
				content.innerHTML = str;
			},
			edit: function(name, age, tel, mail, id) {
				ajax({
					url: "http://riseikann.applinzi.com/test/testPOST.php", //请求地址
					type: "POST", //请求方式
					data: {
						type: 'change',
						name: name,
						age: age,
						tel: tel,
						mail: mail,
						id: id
					}, //请求参数
					dataType: "json",
					success: function(response, xml) {
						let request = JSON.parse(response);
						console.log(request);
						if(request[0].message == '修改成功！') {
							alert(request[0].message);
							dialogShow(false);
							location.reload();
						} else {
							alert('修改失败请稍后重试！');
						}
					},
					fail: function(status) {
						console.log(status);
					}
				});
			}

		};

		//加载数据
		ajax({
			url: "http://riseikann.applinzi.com/test/testPOST.php", //请求地址
			type: "POST", //请求方式
			data: {
				type: 'getData'
			}, //请求参数
			dataType: "json",
			success: function(response, xml) {
				let request = JSON.parse(response);
				book = new NewAddress(request);

			},
			fail: function(status) {
				console.log(status);
			}
		});

		//新建
		function addAddress() {
			let commitData = getDialogValue();
			if(!commitData.name.length) {
				return;
			}
			book.add(commitData.name, commitData.age, commitData.tel, commitData.mail);
		};

		//删除
		function deleteAddress(who) {
			let addressID = who.name;
			book.remove(addressID);
		}
		//查找
		function searchAddress() {
			let name = document.querySelector('#searchText').value;
			book.search(name);
		}
		//修改
		function editAddress(who) {
			let addOrChange = document.querySelector('#addOrChange');
			let addressID = who.name;
			dialogShow(true);
			book.list.map(function(key, value) {
				if(key['id'] == addressID) {
					document.querySelector('#name').value = key.name;
					document.querySelector('#age').value = key.age;
					document.querySelector('#tel').value = key.tel;
					document.querySelector('#mail').value = key.mail;
				}
			});
			addOrChange.onclick = function() {
				let commitData = getDialogValue();
				if(!commitData.name.length) {
					return;
				}
				book.edit(commitData.name, commitData.age, commitData.tel, commitData.mail,addressID);
			}
		}

		//重置
		function reset() {
			location.reload();
		}

		//弹出框
		function dialogShow(bool) {
			let dialog = document.querySelector('#dialog');
			if(bool) {
				dialog.style.display = 'block';
			} else {
				dialog.style.display = 'none';
			}
		};

		//获取dialog内容
		function getDialogValue() {
			let name = document.querySelector('#name').value;
			let age = document.querySelector('#age').value;
			let tel = document.querySelector('#tel').value;
			let mail = document.querySelector('#mail').value;
			let commitData = new CommitData(name, age, tel, mail);
			if(!name.length) {
				alert('请至少输入姓名！');
				return;
			}
			return commitData;
		};

		//留用
		function CommitData(name, age, tel, mail) {
			this.name = name,
				this.age = age,
				this.tel = tel,
				this.mail = mail
		};

		//ajax原生的不会写 百度的😂
		function ajax(options) {
			options = options || {};
			options.type = (options.type || "GET").toUpperCase();
			options.dataType = options.dataType || "json";
			var params = formatParams(options.data);

			if(window.XMLHttpRequest) {
				var xhr = new XMLHttpRequest();
			} else { //IE6及其以下版本浏览器
				var xhr = new ActiveXObject('Microsoft.XMLHTTP');
			}

			//接收 - 第三步
			xhr.onreadystatechange = function() {
				if(xhr.readyState == 4) {
					var status = xhr.status;
					if(status >= 200 && status < 300) {
						options.success && options.success(xhr.responseText, xhr.responseXML);
					} else {
						options.fail && options.fail(status);
					}
				}
			}

			//连接 和 发送 - 第二步
			if(options.type == "GET") {
				xhr.open("GET", options.url + "?" + params, true);
				xhr.send(null);
			} else if(options.type == "POST") {
				xhr.open("POST", options.url, true);
				//设置表单提交时的内容类型
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xhr.send(params);
			}
		};
		//格式化参数
		function formatParams(data) {
			var arr = [];
			for(var name in data) {
				arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
			}
			return arr.join("&");
		};
	</script>

</html>